import { computed, observable } from 'mobx'
import { fromEvent } from 'rxjs'
import { throttleTime } from 'rxjs/operators'

export class AppUiState {
  @observable language = 'zh_CN'
  @observable pendingRequestCount = 0
  @observable.struct windowDimensions = this.getWindowDimensions()

  @computed get isInSync() {
    return this.pendingRequestCount === 0
  }

  constructor() {
    fromEvent(window, 'resize')
      .pipe(throttleTime(500))
      .subscribe(() => {
        this.windowDimensions = this.getWindowDimensions()
      })
  }

  private getWindowDimensions() {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }
}
